<template>
  <div class="wrapper">
    <el-button @click="clickHanlde">点击</el-button>
    <Multivalued 
      v-bind:start="form.start"
      v-on:update:start="form.start = $event"
      v-bind:end="form.end"
      v-on:update:end="form.end = $event"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></Multivalued>
    {{ form.start }}
    {{ form.end }}
  </div>
</template>
<script>
import FormCompDialog from './FormComp/FormCompDialog.vue'
import { createPromiseDialog } from '@/utils/createPromiseDialog';
import Multivalued from './Multivalued.vue'

export default {
  name: 'Form',
  data() { 
    return {
      form: {
        start: new Date(2000, 10, 10, 10, 10),
        end: new Date(2000, 10, 11, 10, 10)
      }
    }
  },
  components:{
    Multivalued
  },
  methods: {
    async clickHanlde(){
      try {
        let dialogComp = createPromiseDialog(FormCompDialog,{
          title: '表单',
        })
        await dialogComp()
      } catch (error) {
        console.log(error);
      }
    }
  }
}
</script>